<template>
    <div class="chart-wrapper" ref="chartRing">
        <!-- 环形chart -->
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        props: {
            label: {
                type: String,
                default: ''
            },
            //数值
            value: {
                type: Number,
                default: 95
            },
            //圆环宽度
            barWidth: {
                type: Number,
                default: 10
            },
            //底色
            backgroundColor: {
                type: String,
                default: 'red'
            },
            color1: {
                type: String,
                default: '#9FCE74'
            },
            color2: {
                type: String,
                default: '#22A857'
            }
        },
        watch: {
            value(val) {
                this.drewCircleChart(this.value, this.label)
            }
        },
        mounted() {
            // this.drawChartRing(this.num, this.label)
            this.drewCircleChart(this.value, this.label)
        },
        methods: {

            drewCircleChart(getvalue, label) {

                var myCharts = this.$echarts.init(this.$refs.chartRing);
                var option = {
                    title: {
                        text: getvalue,
                        textStyle: {
                            color: '#fff',
                            fontSize: 22, // number字号
                            fontWeight: 'normal',
                            fontFamily: 'Borda-DemiBold',
                            rich: {
                                a: {
                                    fontSize: 13, // 单位'分'字号
                                    padding: [0, 0, 12, 2]
                                }
                            }
                        },
                        // subtext: label,
                        subtextStyle: {
                            color: '#fff',
                            fontFamily: 'YouSheBiaoTiHei',
                            fontSize: 13 // 指数字号
                        },
                        // itemGap: -2, // 字体上下间距
                        left: 'center',
                        top: 'center' // 字体与顶部距离
                    },
                    angleAxis: {
                        max: 100,
                        clockwise: true, // 逆时针
                        // 隐藏刻度线
                        show: false
                    },
                    radiusAxis: {
                        type: 'category',
                        show: true,
                        axisLabel: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                    },
                    polar: {
                        center: ['50%', '50%'],
                        radius: '150%' // 环的大小
                    },
                    series: [{
                        type: 'bar',
                        data: [getvalue],
                        showBackground: true,
                        backgroundStyle: {
                            color: this.backgroundColor,
                        },

                        coordinateSystem: 'polar',
                        roundCap: false,
                        barWidth: this.barWidth, // 环的宽度
                        itemStyle: {
                            normal: {
                                opacity: 1,
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: this.color1
                                }, {
                                    offset: 1,
                                    color: this.color2
                                }]),
                            }
                        },
                    }]
                };
                myCharts.setOption(option);
                // 监听屏幕变化自动缩放图表
                window.addEventListener('resize', function() {
                    myCharts.resize()
                })
            }
        }
    }
</script>

<style scoped lang='less'>
    .chart-wrapper {
        width: 300px;
        height: 100px;
        /* //background: url('~@/assets/panel/shengtai-panel/round-1@2x.png') no-repeat center; */
        /* background-size: 95%; */
    }



    .chart-wrapper.desktop {
        background-size: 95%;
    }
</style>